<template>
  <div id="profile">
    <el-page-header @back="goBack" content="个人主页" style="margin-bottom: 20px"></el-page-header>
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="vertical" @select="handleSelect" background-color="#545c64"
      text-color="#fff" active-text-color="#ffd04b">
      <p style="color: #fff; margin: 10px 0">全部功能</p>
      <el-menu-item index="/profile/userInfo">个人信息</el-menu-item>
      <el-menu-item index="/profile/goods">已买到的宝贝</el-menu-item>
      <el-menu-item index="/profile/shopcart">我的购物车</el-menu-item>
      <el-menu-item index="/profile/collection">我的收藏</el-menu-item>
      <el-menu-item index="/profile/message">我的留言</el-menu-item>
      <el-menu-item index="/profile/myRelease">我的发布</el-menu-item>
    </el-menu>

    <div class="container">
      <!-- <keep-alive> -->
        <router-view/>
      <!-- </keep-alive> -->
    </div>
  </div>
</template>

<script>
export default {
  // data() {
  //   return {
  //     activeIndex: '/profile/userInfo'
  //   };
  // },
  computed: {
    activeIndex() {
      return this.$store.state.profileIndex
    }
  },
  methods: {
    goBack() {
      this.$router.go(-1)
    },
    handleSelect(key, keyPath) {
      this.$store.commit('changeProfileIndex', key)
      this.$router.replace(key)
    }
  }
}
</script>

<style scoped>
  #profile {
    /* background-color: red; */
    width: 70%;
    margin: 0 auto;
  }

  .el-menu-demo {
    width: 10%;
    height: 500px;
    float: left;
  }

  .container {
    width: 87%;
    height: 800px;
    /* border: 1px solid #000; */
    float: left;
    margin-left: 2%;
  }
</style>